<template>
    <div>
        <div id="container">
            <div class="top">
                <div class="top_left">
                <span class="textA">电气元器件管理</span>/<span class="textB">电气元器件管理</span>
                </div>
            </div>
            <div class="content">
                <div class="formBox">
                    <div class="left_wrap">
                        <el-form v-model="formData" :inline="true">
                            <el-form-item label="器件名称">
                                <el-input v-model="formData.componentName" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="器件类型">
                                <el-select
                                    v-model="formData.componentType"
                                    placeholder="请选择"
                                    clearable>
                                    <el-option label="类型1" value="1" />
                                    <el-option label="类型2" value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="right_wrap">
                        <el-button type="primary" @click="addForm">新增</el-button>
                        <el-button type="danger" plain @click="getDelete">批量删除</el-button>
                    </div>
                </div>
                <div class="tableBox">
                    <el-table :data="tableData" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" />
                        <el-table-column label="器件图标" align="center">
                            <template #default="scope">
                                <!-- {{ scope.row.icon }} -->
                                <img :src="imageUrl+scope.row.componentUrl" alt="器件图标" style="width: 30px; height: 30px;">
                            </template>
                        </el-table-column>
                        <el-table-column label="器件名称" align="center">
                            <template #default="scope">{{ scope.row.componentName }}</template>
                        </el-table-column>
                        <el-table-column label="器件类型" align="center">
                            <template #default="scope">{{ scope.row.componentType }}</template>
                        </el-table-column>
                        <el-table-column label="发生时间" align="center">
                            <template #default="scope">{{ scope.row.occurTime }}</template>
                        </el-table-column>
                    </el-table>
                    <div class="bottom">
                        <div class="bottom_left">
                            <span>共{{ tableData.length }}条记录</span>
                            <span>{{ formData.currentPage }}/{{ totalPages }} 页</span>
                        </div>
                        <div class="bottom_right">
                            <el-pagination
                                v-model:current-page="formData.currentPage"
                                v-model:page-size="formData.pageSize"
                                :page-sizes="[10, 20, 30, 40]"
                                layout="sizes, prev, pager, next,jumper"
                                :total="total"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"/>
                        </div>
                    </div>
                </div>
                <el-dialog v-model="dialogvisiable" title="新增元器件" center :close-on-click-modal="false"
                :close-on-press-escape="false">
                <el-form v-model="formlist" ref="formRef" class="formlistBox">
                    <el-form-item label="器件名称" :rules="[{ required: true, message: '请输入器件名称', trigger: 'blur' }]">
                        <el-input v-model="formlist.componentName" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="器件类型" :rules="[{ required: true, message: '请选择器件类型', trigger: 'change' }]">
                        <el-select
                            v-model="formlist.componentType"
                            placeholder="请选择"
                            clearable>
                            <el-option label="汇聚终端" value="汇聚终端" />
                            <el-option label="总开关" value="总开关" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-upload
                            class="upload-demo"
                            drag :limit="1"
                            :auto-upload="false"
                            :on-change="handleFileChange"
                            :file-list="fileList"
                            list-type="picture-card"
                            :before-upload="beforeUpload">
                            <!-- <el-icon class="el-icon--upload"><upload-filled/></el-icon> -->
                            <div class="el-upload__text">
                                <el-icon class="el-icon--upload"><upload-filled/></el-icon>
                                点击上传图片
                            </div>
                        </el-upload>
                        <div class="el-upload__tip" style="margin-left: 2rem;">
                            图片格式为jpg/png 大小不能超过500kb
                        </div>
                    </el-form-item>
                </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="submitForm(formRef)">提交</el-button>
                            <el-button type="primary" @click="dialogvisiable = false">取消</el-button>
                        </div>
                    </template>
                </el-dialog>
                <el-dialog style="width: 30%;" v-model="dialogTip" :close-on-click-modal="false"
                :close-on-press-escape="false">
                    <div class="tipBox">
                        <div class="img">
                            <img src="../assets/tip.png" alt="">
                        </div>
                        <h3>提示</h3>
                        <p>您是否要删除所选数据?</p>
                    </div>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogTip = false">我再想想</el-button>
                        <el-button type="primary" @click="chooseDelete">确认删除</el-button>
                    </div>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import { ElMessage} from 'element-plus';
import {getelecData,getelecDelete,getelecUpload} from "@/api/index"
export default ({
    data() {
        return{
            formData:{
                componentName:"",
                componentType:"",
                pageSize:10,
                currentPage:1
            },
            imageUrl:process.env.VUE_APP_BASE_API+'image/',
            tableData:[],
            total:0,
            totalPages:0,
            selectedRows: [], // 用于存储选中的行数据
            dialogvisiable:false,
            action:"",
            dialogTip:false,
            fileList: [], // 存储已上传的文件信息
            formlist:{
                componentName:"",
                componentType:"",
                occurTime:"",
            },
            selectedFile: null
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        padDateComponent(component) {
            return component < 10 ? '0' + component : component;
        },
        getData(){
            getelecData(this.formData).then(resp => { 
                this.tableData = resp.data.records;
                this.total = resp.data.total;
                this.totalPages =resp.data.pages;
            }).catch(() => {
                // this.loading = false;
            });
        },
        search(){
            this.getData();
        },
        getDelete(){
            this.dialogTip =true;
        },
        chooseDelete(){
            const idArray = this.selectedRows.map(item => item.id);
            getelecDelete(idArray).then(resp => { 
                if(resp.code=="0"){
                    ElMessage({
                        type: 'success',
                        message: '删除成功！'
                    });
                    this.dialogTip = false;
                    this.getData();
                } 
            }).catch(() => {
                ElMessage({
                    type: 'error',
                    message: '删除失败！'
                });
                // this.loading = false;
            });
        },
        addForm(){
            this.dialogvisiable = true;
        },
        beforeUpload(file) {
            const isJPGorPNG = ['image/jpeg', 'image/png'].includes(file.type);
            const isLt500K = file.size / 1024 < 500;
            if (!isJPGorPNG) {
                ElMessage({
                    type: 'error',
                    message: '只能上传jpg/png格式的图片'
                });
                return false;
            }
            if (!isLt500K) {
                ElMessage({
                    type: 'error',
                    message: '图片大小不能超过500kb'
                });
                return false;
            }
            return true;
        },
        handleFileChange(file, fileList) {
            if (fileList.length > 0) {
                this.selectedFile = fileList[0].raw;  // 存储选中的文件
            }
        },
        submitForm(){
            if(this.formlist.componentName==""){
                ElMessage({
                    type: 'error',
                    message: '请输入元器件名称！'
                });
                return
            }else if(this.formlist.componentType==""){
                ElMessage({
                    type: 'error',
                    message: '请选择元器件类型！'
                });
                return
            }else if(this.selectedFile == null){
                ElMessage({
                    type: 'error',
                    message: '请上传图片！'
                });
                return
            }
            const now = new Date();
            const year = now.getFullYear();
            const month = this.padDateComponent(now.getMonth() + 1);
            const day = this.padDateComponent(now.getDate());
            const hours = this.padDateComponent(now.getHours());
            const minutes = this.padDateComponent(now.getMinutes());
            const seconds = this.padDateComponent(now.getSeconds());
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            this.formlist.occurTime = formattedDate;

            const uploadData = new FormData();
            uploadData.append('componentJson', JSON.stringify(this.formlist));
            if (this.selectedFile) {
                uploadData.append('file', this.selectedFile);  // 使用存储的文件
            }
            
            getelecUpload(uploadData).then(resp => { 
                if(resp.code=="0"){
                    ElMessage({
                        type: 'success',
                        message: '添加成功！'
                    });
                    this.dialogvisiable = false;
                    this.getData();
                } 
            }).catch(() => {
                ElMessage({
                    type: 'error',
                    message: '添加失败！'
                });
                // this.loading = false;
            });
        },
        handleSizeChange(val){
            this.formData.pageSize = val;
        },
        handleCurrentChange(val){
            this.formData.currentPage = val;
        },
        handleSelectionChange(selections) {
            this.selectedRows = selections;
        }
    }
})
</script>

<style lang="scss" scoped>
#container{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box; // 保证元素的宽度包含padding和border
    .top{
      height: 63px;
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      .top_left{
        width: 300px;
        height: 63px;
        line-height: 63px;
        .textA{
          font-weight: 400;
          color: #7E7E7E;
          margin-right: 5px;
        }
        .textB{
          font-weight: 400;
          color: #3579F6;
          margin-left: 5px;
        }
      }
    }
    .content{
        width: 100%;
        .formBox{
            height: 96px;
            display: flex;
            justify-content: space-between;
            .left_wrap{
                width: 90%;
                .el-input{
                    width: 200px;
                }
                .el-select{
                    width: 200px;
                }
            }
            .right_wrap{
                width: 10%;
                display: flex;
            }
        }
        .tableBox{
            // height: 800px;
            .el-table{
                height: 600px;
            }
            .bottom{
                height: 60px;
                display: flex;
                justify-content: space-between;
                .bottom_left{
                    width: 20%;
                    line-height: 60px;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(61,61,61,0.44);
                }
                .bottom_right{
                    .el-pagination{
                        margin: 20px 10px 0 0;
                    }
                }
            }
        }
        .tipBox{
            text-align: center;
            .img{
                margin-top: 34px;
            }
        }
        .dialog-footer{
            text-align: center;
        }
        .formlistBox{
            .el-input{
                width: 200px;
            }
            .el-select{
                width: 200px;
            }
            :deep(.el-upload-dragger){
                padding: 15px;
                border: none!important;;
                background-color: #ffffff;
            }
            :deep(.el-upload__text){
                display: flex;
                flex-direction: column;
                i{
                    margin: auto;
                }
            }
        }
    }
}
</style>